define(function(require,exports,module){
    require('./slider.css')
    //开发组件模板
    var tp1=[
        '<div class="main"><ul>{#ulTpl#}</ul></div>',
        '<div class="arrow"></div>'
    ].join('')
    //定义列表字符串
    var ulTpl=[
        '<li>',
            '<div class="item">',
                '<img src="./slider/{#itemImg#}" alt=""/>',
                '<p>{#itemText#}</p>',
            '</div>',
            '<div class="layer">',
                '<h3>{#layerTitle#}</h3>',
                '<p>{#layerText#}</p>',
                '<img src="./slider/{#layerImg#}" alt=""/>',
            '</div>',
        '</li>'
    ].join('')
    //获取组件模板数据
    var data=[
        {
            itemImg:'wow.gif',
            itemText:'主页',
            layerTitle:'xxxxx',
            layerText:'ssssss',
            layerImg:'wow.gif'
        },
        {
            itemImg:'wow.gif',
            itemText:'主页',
            layerTitle:'xxxxx',
            layerText:'ssssss',
            layerImg:'wow.gif'
        },
        {
            itemImg:'wow.gif',
            itemText:'主页',
            layerTitle:'xxxxx',
            layerText:'ssssss',
            layerImg:'wow.gif'
        },
        {
            itemImg:'wow.gif',
            itemText:'主页',
            layerTitle:'xxxxx',
            layerText:'ssssss',
            layerImg:'wow.gif'
        }
    ]

    //定义html变量缓存tp1
    var html=''
    for(var i=0; i<data.length ; i++){
        html+=formateString(ulTpl,data[i])
    }

    //将格式化的html模板放到tp1
    var tp1Html=formateString(tp1,{
        ulTpl:html
    })
    // console.log(tp1Html)
    $('#slider').html(tp1Html)

    //绑定事件
    $('#slider .arrow').on('click',function(){
        var arrow=$(this)
        if(arrow.hasClass('close')){
            $('#slider .main').animate({left:-6},400)
            arrow.removeClass('close')
        }else{
            $('#slider .main').animate({left:-62},400)
            arrow.addClass('close')
        }
    })

    //将格式化模板字符串渲染到页面中
    function formateString(str,data){
        return str.replace(/\{#(\w+)#}/g,function(match,$1){
            return data[$1] === undefined ?'':data[$1]
        })
    }
});